<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ReactEvent</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
    <script src="js/JSXTransformer.js"></script>
    <script src="js/jquery-1.11.3.js"></script>
</head>
<body>
    <div id="example"></div>

    <script type="text/babel">
        /*var HelloMessage =React.createClass({
            getInitialState:function(){
                return {
                    value : "Hello Runoob!"
                };
            },
            handleChange:function(event){
                this.setState({
                    value:event.target.value
                });
            },
            render:function(){
                var value = this.state.value ;
                return (
                        <div>
                            <input type="text" value={value} onChange={this.handleChange} />
                            <h4>{value}</h4>
                        </div>
                );
            }
        });
        ReactDOM.render(
                <HelloMessage />,
                document.getElementById("example")
        );*/

        var Content = React.createClass({
            render : function(){
                return (
                        <div>
                            <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
                            <h4>{this.props.myDataProp}</h4>
                        </div>
                );
            }
        });

        var HelloMessage = React.createClass({
            getInitialState:function(){
                return {
                    value : 'Hello Runoob!'
                };
            },
            handleChange:function(event){
                this.setState({
                    value:event.target.value
                });
            },
            render:function(){
                var value = this.state.value ;
                return (
                        <div>
                            <Content myDataProp={value} updateStateProp={this.handleChange} />
                        </div>
                );
            }
        });
        ReactDOM.render(
                <HelloMessage />,
                document.getElementById('example')
        );
    </script>
</body>
</html>